<template>
	<view class="content">
		<u-navbar :fixed="false" :title="basicInfo.APFunName" :autoBack="true" :safeAreaInsetTop="true"
			leftIconColor="#fff"></u-navbar>

		<view class="content_main" style="padding: 10px;">

			<view class="commonBox">
				<view class="commonBox-title">
					<view class="commonBox-title-left">
						<text></text>
					</view>
					<view class="commonBox-title-right">
						<u-tabs lineColor="#51d0d0" @change="changeTopTabs" lineWidth="30" :current="tabsCurrent"
							:activeStyle="{color:'#51d0d0',fontWeight:'500',transform:'scale(1.05)'}"
							:list="realCondition">
						</u-tabs>
					</view>
				</view>
				<view class="commonBox-content">
					<view class="scrollWrap">
						<view v-for="(item,index) in cardData" :index="index" :key="index" class="scrollWrap-item">
							<view class="y-f" style="">
								<text>{{item[realCondition[tabsCurrent]['tabValueKey']]}}</text>
								<text style="margin-top: 8px;font-size: 12px;">{{item.title}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>


			<!-- 图表 -->
			<view class="commonBox">
				<view class="commonBox-title">
					<view class="commonBox-title-left" style="width: fit-content !important;">
						<text>前6客户销售额占比</text>
					</view>
				</view>
				<view class="commonBox-content">
					<m-uCharts chartType="pie" :chartData="chartData1" :ChartsStyle="ChartsStyle"></m-uCharts>
				</view>
			</view>


			<!-- 图表 -->
			<view class="commonBox">
				<view class="commonBox-title">
					<view class="commonBox-title-left" style="width: fit-content !important;">
						<text>前6客户销量占比</text>
					</view>
				</view>
				<view class="commonBox-content">
					<m-uCharts chartType="pie" :chartData="chartData2" :ChartsStyle="ChartsStyle"></m-uCharts>
				</view>
			</view>


			<!-- 图表 -->
			<view class="commonBox">
				<view class="commonBox-title">
					<view class="commonBox-title-left" style="width: fit-content !important;">
						<text>销售未出库分析</text>
					</view>
					<view class="commonBox-title-right">
						<u-tabs lineColor="#51d0d0" @change="changeTopTabs3" lineWidth="30" :current="tabsCurrent3"
							:activeStyle="{color:'#51d0d0',fontWeight:'500',transform:'scale(1.05)'}"
							:list="realCondition3">
						</u-tabs>
					</view>
				</view>
				<view class="commonBox-content">
					<m-uCharts chartType="bar" :chartData="chartData3" :ChartsStyle="ChartsStyle"></m-uCharts>
				</view>
			</view>


			<!-- 图表 -->
			<view class="commonBox">
				<view class="commonBox-title">
					<view class="commonBox-title-left" style="width: fit-content !important;">
						<text>销售分析</text>
					</view>
					<view class="commonBox-title-right">
						<u-tabs lineColor="#51d0d0" @change="changeTopTabs4" lineWidth="30" :current="tabsCurrent4"
							:activeStyle="{color:'#51d0d0',fontWeight:'500',transform:'scale(1.05)'}"
							:list="realCondition4">
						</u-tabs>
					</view>
				</view>
				<view class="commonBox-content">
					<m-uCharts chartType="line" :chartData="chartData4" :ChartsStyle="ChartsStyle"></m-uCharts>
				</view>
			</view>



		</view>
	</view>
</template>

<script>
	import index from '../../../uni_modules/uview-ui';
	import dataInitFun from '@/commonPage/kanban/BIKanban/js/dataInit.js';
	var dataInit = dataInitFun;
	export default {
		data() {
			return {
				basicInfo: {
					APFunName: " "
				},
				tabsCurrent: 1,
				realCondition: [{
					name: '去年',
					tabValueKey: 'oldValue',
				}, {
					name: '今年',
					tabValueKey: 'newValue',
				}],
				cardData: [],
				ChartsStyle: {
					width: '100%',
					height: '240px'
				},
				chartData1: {},
				chartData2: {},

				chartData3: {},
				chartDataArr3: [],
				tabsCurrent3: 0,
				realCondition3: [{
					name: '数量',
				}, {
					name: '金额',
				}],

				chartData4: {},
				chartDataArr4: [],
				tabsCurrent4: 0,
				realCondition4: [{
					name: '销量',
				}, {
					name: '销售额',
				}],
			};
		},
		onLoad(option) {

			let basicInfo = this.$utils.deepClone(this.$store.state.Menu);

			this.basicInfo = this.$utils.deepClone(basicInfo) || {};

			this.getDataInfo();
		},
		methods: {
			getDataInfo() { // 获取数据
				let that = this;

				this.Request.request('plat_xiaoshou', {}, function(ret) { 
					if (ret.status == 200) {
						let cardData = dataInit.getInitByKanban('销售', ret.data);

						that.cardData = cardData;

						// 饼图
						let chartData1 = ret.data.ds5.map(item => {
							return {
								name: item.ClientName,
								value: +item.Rate,
								type: 'pie',
							}
						})

						let chartData2 = ret.data.ds6.map(item => {
							return {
								name: item.ClientName,
								value: +item.Rate,
								type: 'pie',
							}
						});

						that.chartData1 = {
							ds5: chartData1
						}
						that.chartData2 = {
							ds6: chartData2
						}


						// 条状图
						let ds7 = that.$utils.deepClone(ret.data.ds7[0]);
						delete ds7.ID;
						delete ds7.name;

						let backData = that.groupData(ds7, '数量', '金额');
						// console.log(backData);
						let allData = []
						backData.forEach(item => {
							let objData = Object.keys(item).map(key => {
								return {
									seriesName: key,
									name: '',
									value: ds7[key],
									type: 'bar',
								}
							})
							allData.push(objData)
						});
						that.chartDataArr3 = allData;


						that.chartData3 = {
							ds7: allData[that.tabsCurrent3]
						}


						let allData_ds8 = that.setFormatter(ret.data.ds8);
						that.chartDataArr4 = allData_ds8;

						that.chartData4 = {
							ds8: allData_ds8[that.tabsCurrent4]
						}

						that.$forceUpdate();
					}
				});
			},
			groupData(data, text1, text2) { // 数据分割
				const result = [];
				const quantityGroup = {};
				const amountGroup = {};

				// 遍历原始数据的每个键值对  
				for (const key in data) {
					if (data.hasOwnProperty(key)) {
						if (key.includes(text1)) {
							quantityGroup[key] = data[key];
						} else if (key.includes(text2)) {
							amountGroup[key] = data[key];
						}
					}
				}

				// 将分组后的对象添加到结果数组中  
				if (Object.keys(quantityGroup).length > 0) {
					result.push(quantityGroup);
				}
				if (Object.keys(amountGroup).length > 0) {
					result.push(amountGroup);
				}

				return result;
			},
			setFormatter(data) {
				// 初始化结果数组  
				let lastYearSales = []; // 去年销量与销售额  
				let thisYearSales = []; // 今年销量与销售额  

				// 遍历原始数据  
				data.forEach(item => {
					// 添加去年销量  
					lastYearSales.push({
						seriesName: '去年销量',
						name: item.Month,
						value: item.OldQty,
						type: 'line'
					});

					// 添加去年销售额  
					lastYearSales.push({
						seriesName: '去年销售额',
						name: item.Month,
						value: item.OldMoney,
						type: 'line'
					});

					// 添加今年销量  
					thisYearSales.push({
						seriesName: '今年销量',
						name: item.Month,
						value: item.Qty,
						type: 'line'
					});

					// 添加今年销售额  
					thisYearSales.push({
						seriesName: '今年销售额',
						name: item.Month,
						value: item.Money,
						type: 'line'
					});
				});

				// 返回结果数组  
				return [lastYearSales, thisYearSales];
			},
			changeTopTabs(data) { // 切换topCard 去年、今年
				this.tabsCurrent = data.index;
			},
			changeTopTabs3(data) { // 切换销售未出库分析 数量、金额
				this.tabsCurrent3 = data.index;

				this.chartData3 = {
					ds7: this.chartDataArr3[this.tabsCurrent3]
				}
			},
			changeTopTabs4(data) { // 切换销售分析 销量、销售额
				this.tabsCurrent4 = data.index;

				this.chartData4 = {
					ds7: this.chartDataArr4[this.tabsCurrent4]
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #f2f2f2;
	}

	// 待办/实时数据横向滚动
	.scrollWrap {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		max-height: 180px;
		overflow-y: hidden;
		overflow-x: auto;
		row-gap: 3px;
		column-gap: 3px;

		&-item {
			width: 35vw;
			height: 80px;
			display: flex;
			flex-direction: column;
			background: linear-gradient(to bottom right, #F6F6F6, #FFFFFF);
			border-radius: 5px;
			padding: 5px 10px;
			justify-content: center;
			align-items: center;
		}
	}

	::v-deep.u-tabs__wrapper__nav__item {
		height: 30px !important;
	}

	.commonBox {
		display: flex;
		flex-direction: column;
		padding: 10px 5px;
		background-color: #ffffff;
		margin-bottom: 10px;
		border-radius: 16rpx;

		&-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10px 5px 10px 10px;

			&-left {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				width: 150rpx;
				font-size: 16px;
				font-weight: 500;
			}

			&-right {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				width: 100rpx;
			}
		}

		&-content {
			display: flex;
			flex-direction: column;
		}
	}

	.charts-box {
		width: 100%;
		height: 240px;
	}
</style>